<template>
	<view class="content">
		<view @touchmove.prevent.stop class="shade" v-if="is_admin != 1">
			<view class="apply_title">抱歉！您不是管理员，无法浏览当前页面</view>
			<text class="btn" @tap="apply()">立即去申请</text>
		</view>
		
		<view class="head"><navigator url="add" class="head-text">创建新的活动</navigator></view>

		<!-- 活动列表 -->
		<activity-list :activity_list_data="this.activity_list_data" :scrollH="scrollH" :status="status" />

		<view class="top" :style="{ display: flag === true ? 'block' : 'none' }"><uni-icons class="topc" type="arrowthinup" size="30" @click="top"></uni-icons></view>
	</view>
</template>

<script>
import activityList from '../../components/admin/activity_list.vue';
// import uniLoadMore from '../../components/common/uni-load-more.vue'
import uniIcons from '../../components/common/uni-icons/uni-icons.vue';

export default {
	// 定义组件
	components: {
		activityList,
		// backTop,
		// uniLoadMore,
		uniIcons,
	},
	data() {
		return {
			scrollH: 100,
			activity_list_data: [],
			page: 1,
			flag: false,
			status: 'more',
			is_admin: 0,
		};
	},
	onLoad() {
		this.$comm.appLogin(user_info=>{
			console.log(user_info,'onLoad_user_info')
			this.activity_list()
			this.apply_info()
		})
	},
	// onShow: function(options) {
	// 	this.loaddata();
	// },
	onPullDownRefresh() {
		this.loaddata();
	},
	onReachBottom() {
		this.activity_list();
	},
	methods: {
		apply_info() {
			this.$comm.request({
				url: 'api/apply_info',
				method: 'GET',
				success: (res) => {
					console.log(res, 'api/apply_info')
					if (res.data.code == 201) return
					this.is_admin = res.data.msg.status
				}
			})
		},
		
		apply() {
			window.location.href = 'http://hb.4coder.org.cn/bm/index.html?#/pages/administrator/adminsign'
		},
		
		//获取活动列表
		activity_list() {
			if (this.status == 'nomore') return
			// console.log(this.$comm.app_config.share_url)
			this.$comm.request({
				url: 'api/activity_list',
				method: 'GET',
				data: {
					page: this.page++
				},
				success: res => {
					console.log(res, 'api/activity_list');
					if (res.data.code == 202) {
						this.status = 'nomore' 
						return
					}
					var list = res.data.result.list;
					this.activity_list_data = this.activity_list_data.concat(list);
					if (list.length < 10) {
						this.status = 'nomore';
					}
				}
			});
		},

		// 下拉刷新
		loaddata() {
			this.page = 1;
			this.status = 'more';
			this.activity_list_data = [];
			this.activity_list();
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},

		//获取可视区域高度
		get_scrollH() {
			uni.getSystemInfo({
				success: res => {
					this.scrollH = res.windowHeight - uni.upx2px(210);
					// console.log(res.windowHeight, '可视区域高度',this.scrollH)
				}
			});
		},

		//回到顶部
		top() {
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
		},
		onPageScroll(e) {
			//根据距离顶部距离是否显示回到顶部按钮
			if (e.scrollTop > 600) {
				//当距离大于600时显示回到顶部按钮
				this.flag = true;
			} else {
				//当距离小于600时显示回到顶部按钮
				this.flag = false;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
@import '@/common/main.css';
@import '@/common/zcm-main.css';

.shade {
		position: fixed;
		height: 100vh;
		z-index: 1000;
		background-color: rgba(0, 0, 0, .6);
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
	
		.apply_title {
			color: #ffffff;
			font-size: 35rpx;
			margin-bottom: 20rpx;
		}
	
		.btn{
			background-color:#475dfc;color: #ffffff;font-size: 30rpx;padding: 10rpx 30rpx;border-radius: 50rpx;	
		}
	}

page {
	background-color: #f1f1f1;
	font-size: 30rpx;
}

.head {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding-top: 30rpx;

	.head-text {
		// position: fixed;
		color: #ffffff;
		line-height: 2.5;
		background-color: #475dfc;
		width: 400rpx;
		text-align: center;
		border-radius: 50rpx;
		margin: 0rpx 15rpx 15rpx 15rpx;
	}
}

.top {
	position: relative;
	display: none;
	/* 先将元素隐藏 */
}

.topc {
	position: fixed;
	right: 0;
	// background: #F0F0F0;
	bottom: 20rpx;
	right: 30rpx;
	background-color: #fff;
	border: solid 2rpx #475dfc;
	border-radius: 100rpx;
	height: 80rpx;
	width: 80rpx;
	line-height: 80rpx;
}
</style>
